import React, { Component, useState } from "react";
import { Button, Form, Input, NavBar, Toast } from "antd-mobile";

import * as service from "../api/index";
import styles from "../styles/yanjing.scss";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      visible: false,
      setVisible: true,
      zhanghao: "",
      mima: "",
    };
  }
  //返回
  fanhui() {
    this.props.history.go(-1);
  }
  //点击眼睛打开
  kai() {
    this.visible = true;
    this.setState({ visible: true });
  }
  //点击眼睛关闭
  guan() {
    this.visible = false;
    this.setState({ visible: false });
  }

  //获取账号
  zhanghao(value) {
    //   this.zhanghao=value
    this.setState({ zhanghao: value });
  }
  //获取密码
  mima(value) {
    this.setState({ mima: value });
  }
  zhuce() {
    this.props.history.push("/register");
  }
  //登录
  async denglu() {
    var res = await service.user_login({
      loginname: this.state.zhanghao,
      password: this.state.mima,
    });
    console.log(res);
    localStorage.setItem("token", res.data.data.token);
    localStorage.setItem("userid", res.data.data.userid);
    if (res.data.code == 200) {
      this.props.history.push("/index/shouye");
      Toast.show({
        content: "登陆成功",
        afterClose: () => {
          console.log("after");
        },
      });
    }
  }
  render() {
    return (
      <div className="Login">
        <div className="header">
          <NavBar>登录</NavBar>
        </div>
        <>
          <Form layout="horizontal" mode="card">
            <Form layout="horizontal">
              <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true }]}
              >
                <Input
                  onChange={(value) => {
                    this.zhanghao(value);
                  }}
                  placeholder="请输入用户名"
                  clearable
                />
              </Form.Item>
              <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true }]}
                extra={
                  <div className={styles.eye}>
                    {!this.visible ? (
                      <EyeInvisibleOutline
                        onClick={() => {
                          this.kai();
                        }}
                      />
                    ) : (
                      <EyeOutline
                        onClick={() => {
                          this.guan();
                        }}
                      />
                    )}
                  </div>
                }
              >
                <Input
                  placeholder="请输入密码"
                  clearable
                  type={this.visible ? "text" : "password"}
                  onChange={(value) => {
                    this.mima(value);
                  }}
                />
              </Form.Item>
            </Form>
          </Form>
        </>
        <Button
          block
          color="primary"
          size="large"
          onClick={() => {
            this.denglu();
          }}
        >
          登录
        </Button>
        <button
          onClick={() => {
            this.zhuce();
          }}
        >
          去注册
        </button>
      </div>
    );
  }
}

export default Login;
